<template>
  <div class="content-wrap" id="wrap">
    <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    <map name="Map" id="Map">
      <area id="1001" shape="rect" coords="394,239,487,270" href="javascript:void(0)" @click="handlerFloor('1幢')" />
    </map>
  </div>
</template>
<script>
export default {
  name: 'airConditioning',
  data() {
    return {
      src: require('../../../../public/img/aircondition.jpg')
    };
  },
  created() {},
  mounted() {
    var test = document.getElementById('wrap');
    test.onmousemove = function (e) {
      var x = e.layerX;
      var y = e.layerY;
      e.target.title = 'X is ' + x + ' and Y is ' + y;
    };
  },
  methods: {
    handlerFloor() {
      alert(1);
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 50px;
  width: 1722px;
  height: 795px;
}
</style>
